<template>
	<view>
		<view class="content">
			<view class="banner-list">
				<u-swiper :list="bannerList" keyName="pictureUrl" height="380rpx" circular @click="bannerClick"></u-swiper>
				<view class="video-list">
					<view v-for="(item,index) in videoList" class="image-container"
						:style="index!=0?'margin-left:20rpx':''" @click="jumpToUrl(item.jumpUrl)">
						<!-- <img :src="item.pictureUrl" alt="展示图片" /> -->
						<image style="width: 100%; height:160rpx;border-radius: 12rpx;" mode="aspectFill"
							@load="onImageLoad" :src="item.pictureUrl"></image>
						<view class="text-overlay">{{ item.content }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="writer-content">
			<view class="wirter-title">
				<view class="title-icon"></view>
				<view class="title-text">优秀作者</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view :class="findWriterClass(index)" v-for="(item, index) in writerList" :key="index">
					<view class="writer-avatar"><u-avatar :src="item.avatarUrl" mode="aspectFill"></u-avatar></view>
					<view class="writer-name">{{item.tagName}}</view>
				</view>
			</scroll-view>
		</view>

		<view class="blog-content">
			<view class="blog-title">
				<view class="title-icon"></view>
				<view class="title-text">帖子列表</view>
			</view>
			<view class="blog-value">
				<view class="search-tab">
					<view class="search-tab-item">
						<view class="title">类型:</view>
						<picker style="width: 250rpx;" @change="change" :value="index" :range="typeList"
							range-key="typeName">
							<view class="tab-value">{{typeList[index].typeName}}<u-icon name="arrow-down"
									size="10"></u-icon></view>
						</picker>
					</view>
					<view class="search-tab-item" style="margin-left: 40rpx;">
						<view class="title">作者:</view>
						<picker style="width: 250rpx;" @change="changeTag" :value="index2" :range="tagList"
							range-key="tagName">
							<view class="tab-value">{{tagList[index2].tagName}}<u-icon name="arrow-down"
									size="10"></u-icon></view>
						</picker>
					</view>
				</view>
				<view class="search-tab" style="margin-top: 20rpx;">
					<view class="search-tab-item">
						<view class="title">标题:</view>
						<input placeholder="请输入内容" class="tab-input" v-model="params.title"></input>
					</view>
					<view class="search-tab-item" style="margin-left: 40rpx;">
						<view class="search-tab-button">
							<u-button color="#FF2248" shape="circle" size="mini" style="width: 20rpx;"
								@click="paramsSearch">查询</u-button>
							<u-button shape="circle" size="mini" style="width: 20rpx;"
								@click="resetSearch">清空</u-button>
						</view>
					</view>
				</view>
				<view class="blog-items">
					<view class="blog-item" v-for="item in blogList" @click="jumpToUrl(item.blogJumpUrl)">
						<view class="blog-item-pic">
							<u--image :src="item.blogPic" width="200rpx" height="200rpx" radius="8"
								mode="aspectFit"></u--image>
						</view>
						<view class="blog-item-value">
							<view class="value-title">
								<image v-if="item.top==1" style="width: 28rpx; height: 28rpx;" :src="topLogo"></image>
								{{item.title}}
							</view>
							<view class="value-content"> <u-parse :content="item.blogDesc"></u-parse></view>
							<view class="value-type">
								<view class="value-type-item" v-for="item1 in item.types">{{item1.typeName}}</view>
							</view>
							<view class="value-tag">
								<view class="value-tag-item" v-for="item2 in item.tags">
									{{item2.tagName}}
								</view>
							</view>
							<view class="value-date">
								<u-icon name="calendar" size="20rpx"></u-icon>{{item.blogTime}}
							</view>
						</view>
					</view>
					<view v-if="total>params.pageSize"
						style="display: flex;justify-content: center;align-items: center;margin-top: 5rpx;">
						<uni-pagination :show-icon="true" :total="total" @change="changePage" />
					</view>
				</view>
			</view>
		</view>
		
		<!-- 项目引用的uni-fab组件经过修改 -->
		<uni-fab ref="fab" :pattern="pattern" :content="content" horizontal="right" vertical="bottom"
			direction="horizontal" @trigger="trigger" @fabClick="fabClick">
		</uni-fab>

		<u-popup :show="dialogShow" mode="center" :closeOnClickOverlay="false" round="8rpx">
			<view class="dialog-image-container">
				<!-- <image :src="dialogBackground"></image> -->
				<view class="dialog-content" v-if="chooseIndex==0">
					<view class="dialog-title">
						<view class="textValue">Jinnies宣传栏</view>
					</view>
					<view class="dialog-value">
						<view class="text-content">
							<text>{{textContent}}</text>
						</view>
						<view class="tagList">
							<view class="tag-item" v-for="item in textTags" v-if="item">
								#{{item}}#
							</view>
						</view>
					</view>
					<view class="dialog-button">
						<view class="dialog-button-close" @click="closeDialog">Jinnies收到！</view>
					</view>
				</view>
				<view class="dialog-content" v-if="chooseIndex==1">
					<view class="dialog-title">
						<view class="textValue">怡路相伴</view>
					</view>
					<view class="dialog-value">
						<u-steps style="height: 550rpx;" :current="topicList.length" direction="column"
							activeColor="#FF2248" dot>
							<u-steps-item style="padding-top: 10rpx;padding-bottom: 10rpx;margin-bottom: -10rpx;"
								v-for="item in topicList" :title="item.title" :desc="item.showTime">
							</u-steps-item>
						</u-steps>
					</view>
					<view class="dialog-button" style="padding-top: 60rpx;">
						<view class="dialog-button-close" @click="closeDialog">关闭</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>



</template>

<script>
	import {
		cmsParamsList,
		getBlogDetail,
		cmsBannerIndexList,
		cmsPublicizeIndexList,
		findIsShowWriterList
	} from "@/api/page/blog";
	export default {
		data() {
			return {
				bannerList: [],
				videoList: [],
				writerList: [],
				index: 0,
				index2: 0,
				typeList: [{
					typeId: '',
					typeName: '全部'
				}],
				tagList: [{
					tagId: '',
					tagName: '全部'
				}],
				blogList: [],
				params: {
					pageNum: 1,
					pageSize: 10,
					title: null,
					typeId: null,
					tagId: null,
				},
				dialogLogo: "/static/images/logo/dialogLogo.png",
				topLogo: "/static/images/logo/topLogo.png",
				dialogShow: false,
				textContent: "",
				textTags: [],
				total: 0,
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#FF2248',
					buttonColor: '#FF2248',
					iconColor: '#fff',
					icon: "circle"
				},
				content: [{
						iconPath: '/static/images/logo/xuanchuanlan.png',
						selectedIconPath: '/static/images/logo/xuanchuanlan2.png',
						text: '宣传栏',
						active: false
					},
					{
						iconPath: '/static/images/logo/tuzi.png',
						selectedIconPath: '/static/images/logo/tuzi2.png',
						text: '怡路相伴',
						active: false
					}
				],
				chooseIndex: -1,
				topicList: [],
				showFab: false,
			}
		},
		mounted() {
			this.findBannerList()
			this.findShowWriterList()
			this.findBlogList()
			this.getTypeAndTagList()
		},
		methods: {
			findBlogList() {
				uni.showLoading({
					title: "数据加载中"
				})
				cmsParamsList(this.params)
					.then((response) => {
						this.blogList = response.rows;
						this.total = Number(response.total);
					})
					.finally(() => {
						uni.hideLoading();
					});
				const element = document.querySelector(".blog-items");
				element.scrollTop = 0;
			},

			getTypeAndTagList() {
				getBlogDetail('').then((response) => {
					this.typeList = [{
						typeId: '',
						typeName: '全部'
					}]
					this.tagList = [{
						tagId: '',
						tagName: '全部'
					}]
					if (response.types) {
						for (var i = 0; i < response.types.length; i++) {
							this.typeList.push(response.types[i])
						}
					}
					if (response.tags) {
						for (var i = 0; i < response.tags.length; i++) {
							this.tagList.push(response.tags[i])
						}
					}
				});
			},
			findShowWriterList() {
				findIsShowWriterList().then((response) => {
					this.writerList = response.data
				})
			},
			findBannerList() {
				cmsBannerIndexList().then((response) => {
					this.bannerList = [...response.data.bannerList]
					this.videoList = [...response.data.videoList]
				})
			},
			changePage(e) {
				this.params.pageNum = e.current
				this.findBlogList()
			},
			scroll: function(e) {
				// console.log(e)
			},
			findWriterClass(index) {
				if (index == 0) {
					return 'scroll-view-item_H writer-background-1';
				} else {
					if ((index + 1) % 2 == 0) {
						return 'scroll-view-item_H margin-left-wirter writer-background-2';
					} else {
						return 'scroll-view-item_H margin-left-wirter writer-background-1';
					}
				}
			},
			change(e) {
				this.index = e.detail.value
				this.params.typeId = this.typeList[this.index].typeId
			},
			changeTag(e) {
				this.index2 = e.detail.value
				this.params.tagId = this.tagList[this.index2].tagId
			},
			dialogClick() {
				cmsPublicizeIndexList().then((response) => {
					this.dialogShow = true
					if (this.chooseIndex == 0) {
						let value = response.data.mainList[0]
						if (value) {
							this.textContent = value.content;
							this.textTags = value.tagList.split(",");
						}
					}
					if (this.chooseIndex == 1) {
						this.topicList = [...response.data.topicList]
					}
				})
			},
			closeDialog() {
				this.dialogShow = false
				this.textContent = ""
				this.textTags = []
				this.content[this.chooseIndex].active = false
				this.chooseIndex = -1
			},
			resetSearch() {
				this.params = {
					pageNum: 1,
					pageSize: 10,
					title: null,
					typeId: null,
					tagId: null,
				}
				this.index = 0
				this.index2 = 0
				this.findBlogList()
			},
			paramsSearch() {
				this.params.pageNum = 1
				this.findBlogList()
			},
			bannerClick(index) {
				if (this.bannerList[index].jumpUrl) {
					window.open(this.bannerList[index].jumpUrl, "_blank");
				}
			},
			jumpToUrl(url) {
				if (url) {
					window.open(url, "_blank");
				}
			},
			onImageLoad(e) {
				// console.log('图片加载完成');
			},
			trigger(e) {
				this.content[e.index].active = true
				this.chooseIndex = e.index
				this.dialogClick()
				return;
			},
			fabClick() {
				this.showFab = !this.showFab
			},


		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 750rpx;
		height: 600rpx;
		position: relative;
		background-color: white;
		padding-bottom: 20rpx;
	}

	.banner-list {
		width: 675rpx;
		margin-left: auto;
		margin-right: auto;

		.video-list {
			margin-top: 20rpx;
			width: 675rpx;
			height: 160rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;

			.image-container {
				position: relative;
				margin: 0 auto;
				height: 160rpx;
				width: 211rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				// img {
				// 	width: 100%;
				// 	height: 160rpx;
				// 	object-fit: cover;
				// 	/* 保持图片比例并覆盖容器 */
				// 	border-radius: 12rpx 12rpx 12rpx 12rpx;
				// }

				.text-overlay {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 211rpx;
					background-color: rgba(0, 0, 0, 0.5);
					/* 半透明黑色背景 */
					color: white;
					padding: 5rpx;
					font-size: 20rpx;
					box-sizing: border-box;
					border-radius: 0 0 12rpx 12rpx;
					text-align: center;
				}
			}

		}
	}

	.writer-content {
		width: 750rpx;
		position: relative;
		background-color: white;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		margin-top: 8rpx;

		.wirter-title {
			width: 675rpx;
			height: 60rpx;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			justify-content: start;
			align-items: center;
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 675rpx;
			margin-left: auto;
			margin-right: auto;
		}

		.scroll-view-item_H {
			display: inline-block;
			width: 270rpx;
			height: 180rpx;
			text-align: center;
			border: 2rpx solid #DBDBDB;

			.writer-avatar {
				width: 270rpx;
				height: 108rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.writer-name {
				width: 270rpx;
				height: 72rpx;
				display: flex;
				justify-content: center;
				align-items: start;
				font-family: "PingFang-SC";
				font-size: 21rpx;
			}
		}

		.writer-background-1 {
			background-color: #fdf6f6;
		}

		.writer-background-2 {
			background-color: #f5f9fe;
		}

	}

	.blog-content {
		width: 750rpx;
		position: relative;
		background-color: white;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		margin-top: 8rpx;

		.blog-title {
			width: 675rpx;
			height: 60rpx;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			justify-content: start;
			align-items: center;
		}

		.blog-value {
			width: 675rpx;
			margin-left: auto;
			margin-right: auto;

			.search-tab {
				width: 675rpx;
				display: flex;
				justify-content: start;
				align-items: center;

				.search-tab-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 317.5rpx;
					font-family: "PingFang-SC";
					font-size: 25rpx;

					.title {
						width: 67.5rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 5rpx;
					}

					.tab-value {
						padding: 10rpx 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 260rpx;
						font-size: 20rpx;
						border-radius: 64rpx;
						background-color: #f5f5f5;

						span {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.tab-input {
						margin-left: 10rpx;
						width: 290rpx;
						height: 46rpx;
						font-size: 20rpx;
						border-radius: 64rpx;
						background-color: #f5f5f5;
						padding: 10rpx 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.search-tab-button {
						width: 236.25rpx;
						height: 46rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
					}
				}
			}

			.blog-items {
				height: 60vh;
				margin-top: 20rpx;
				width: 675rpx;
				overflow-y: scroll;
				padding-bottom: 40rpx;

				// border: 1px solid black;
				.blog-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #DBDBDB;
					width: 675rpx;
					height: 250rpx;
					padding: 20rpx;

					.blog-item-pic {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 220rpx;
						height: 250rpx;
					}

					.blog-item-value {
						// margin-left: 10rpx;
						width: 473rpx;
						height: 250rpx;
						font-family: "PingFang-SC";

						.value-title {
							height: 45rpx;
							font-size: 25rpx;
							font-weight: bold;
							display: flex;
							align-items: center;
						}

						.value-content {
							margin-top: 2rpx;
							height: 102rpx;
							font-size: 18rpx;
							color: rgba(0, 0, 0, 0.4);
							overflow-y: scroll;
						}

						.value-type {
							margin-top: 4rpx;
							height: 32.5rpx;
							display: flex;
							font-size: 15rpx;
							overflow: hidden;

							.value-type-item {
								padding: 4rpx;
								width: fit-content;
								border: 2rpx solid #FF2248;
								color: #FF2248;
								border-radius: 4rpx;
								margin-right: 4rpx;
								display: flex;
								align-items: center;
							}
						}

						.value-tag {
							margin-top: 4rpx;
							height: 32.5rpx;
							display: flex;
							font-size: 15rpx;
							overflow: hidden;

							.value-tag-item {
								width: fit-content;
								background-color: #f4f4f5;
								border: 2rpx solid #e9e9eb;
								color: #909399;
								padding: 4rpx;
								border-radius: 4rpx;
								margin-right: 4rpx;
								display: flex;
								align-items: center;
							}
						}

						.value-date {
							margin-top: 4rpx;
							height: 25rpx;
							font-size: 15rpx;
							display: flex;
						}
					}
				}
			}
		}
	}

	.title-icon {
		height: 30rpx;
		width: 8rpx;
		background-color: #FF2248;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.title-text {
		margin-left: 10rpx;
		font-size: 12px;
		font-weight: bold;
		font-family: "PingFang-SC";
		color: #FF2248;
	}

	.margin-left-wirter {
		margin-left: 10rpx;
	}

	.dialog-image-container {
		height: 800rpx;
		width: 600rpx;
		background-image: url("@/static/images/dialogBackground.png");
		background-repeat: no-repeat;
		background-size: cover;

		.dialog-content {
			padding: 20rpx;
			height: 800rpx;

			.dialog-title {
				height: 80rpx;
				// border: 1px solid black;
				padding-bottom: 20rpx;

				.textValue {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: end;
					font-size: 32rpx;
					font-weight: 550;
					font-family: "PingFang-SC";
					font-style: normal;
					letter-spacing: 0.5rpx;
					color: #3C3C3C;
				}
			}

			.dialog-value {
				height: 550rpx;
				width: 500rpx;
				margin-left: auto;
				margin-right: auto;
				// border: 1px solid black;
				overflow-wrap: break-word;
				overflow-y: scroll;
				padding-bottom: 20rpx;

				.text-content {
					padding-left: 40rpx;
					padding-right: 30rpx;
					padding-bottom: 20rpx;
					font-size: 23rpx;
					font-family: "PingFang-SC";
					color: #3C3C3C;
				}

				.tagList {
					padding-left: 40rpx;
					padding-right: 20rpx;

					.tag-item {
						display: flex;
						justify-content: center;
						align-items: center;
						width: fit-content;
						height: 30rpx;
						font-size: 22rpx;
						background-color: #FF2248;
						padding: 5rpx 20rpx;
						color: white;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						margin-bottom: 5rpx;
						font-family: "PingFang-SC";
					}

				}
			}

			.dialog-button {
				height: 80rpx;
				// width: 600rpx;
				// border: 1px solid black;
				display: flex;
				justify-content: center;
				align-items: center;

				.dialog-button-close {
					height: 60rpx;
					width: fit-content;
					background-color: #FF2248;
					color: white;
					border-radius: 78rpx;
					padding: 10rpx 30rpx;
					font-size: 25rpx;
					font-family: "PingFang-SC";
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}

	::v-deep .u-steps-item__wrapper--column--dot {
		background: none;
	}

	::v-deep .u-text__value--content {
		font-weight: bold !important;
	}

	::v-deep .uni-fab__plus--active {
		transform: rotate(0deg);
	}

	// ::v-deep .u-swiper__wrapper__item__wrapper__image{
	// 	div{
	// 		// background-size: contain !important;
	// 		background-color: white !important;
	// 	}
	// }
</style>